<template>
	<view class="home-page">
		<!-- 轮播图 -->
		<view class="banner">
			<uv-swiper :list="list" previousMargin="30" nextMargin="30" circular :autoplay="true" radius="5"
				bgColor="#ffffff">
			</uv-swiper>
		</view>

		<!-- Usage Summary -->
		<view class="usage-summary">
			<view class="summary-item" v-for="(item, index) in summaryData" :key="index">
				<text class="label">{{ item.label }}</text>
				<text class="value">{{ item.value }}</text>
			</view>
		</view>

		<view class="rank-info" @click="to_add_carboon">
			<text class="rank-text">添加排碳量记录</text>
		</view>
		<view class="rank-info">
			<text class="rank-text">排名：全校{{userRank}}名</text>
		</view>

		<!-- Chart -->
		<!-- 		<view class="chart-area">
			<view class="title">
				<text>近7日排碳量</text>
			</view>
			<view class="charts-box">
				<qiun-data-charts type="column" :opts="opts" :chartData="chartData" />
			</view>
		</view> -->
	</view>
</template>


<script>
	import uCharts from '@/uni_modules/qiun-data-charts/js_sdk/u-charts/u-charts.js';
	const db = uniCloud.database()
	// 轮播图数据获取
	let opendb_banner_db = db.collection('opendb-banner');
	// 获取排碳数据
	let carboon_db = db.collection('abu_CarbonRecord');
	export default {
		data() {
			return {
				userRank: '',
				rank: 0,
				daily_data: [],
				current_user_info: {},
				carboon_data: [],
				list: [],
				current: 0,
				chartData: {},
				summaryData: [{
						label: '今日减排量：',
						value: '10 kg'
					},
					{
						label: '累计减排量：',
						value: '100 kg'
					}
				],
				opts: {
					// Your chart options
				}
			}
		},
		onLoad() {
			this.current_user_info = uniCloud.getCurrentUserInfo()
		},
		async onReady() {
			// 获取轮播图图片数据
			await this.load_banner_img()
			// 模拟图标数据

			// 加载谈数据
			await this.load_carbon_data();

			await this.getServerData();
		},
		methods: {
			to_add_carboon() {
				uni.navigateTo({
					url: "/pages/abu_CarbonRecord/add"
				})
			},
			// 获取轮播图数据
			load_banner_img() {
				opendb_banner_db.get().then(res => {
					this.list = res.result.data.map(item => {
						return item.bannerfile.path;
					});
				});
			},
			async load_carbon_data() {
				try {
					// 获取每日的排碳量数据
					const dailyDataResponse = await carboon_db.groupBy(
							'dateToString(add(new Date(0), date), "%m-%d", "+0800") as date')
						.groupField('sum(emission_reduction) as emission_reduction')
						.get();
					this.daily_data = dailyDataResponse.result.data;
					console.log(this.daily_data);

					if (this.daily_data.length > 0) {
						this.summaryData[0].value = this.daily_data[0].emission_reduction + 'Kg';
					}
					// 获取总的排碳量以及每个用户的排碳量数据
					const allDataResponse = await carboon_db.groupBy('user_id')
						.groupField('sum(emission_reduction) as emission_reduction').orderBy('emission_reduction')
						.get();
					const all_data = allDataResponse.result.data;

					const currentUserIndex = all_data.findIndex(item => item.user_id === this.current_user_info
						.uid);
					if (currentUserIndex !== -1) {
						const userRank = currentUserIndex + 1;
						console.log('Current user carbon data:', all_data[currentUserIndex].emission_reduction,
							'Rank:', userRank);
						this.summaryData[1].value = all_data[currentUserIndex].emission_reduction + 'Kg';
						this.userRank = userRank
					} else {
						console.log('Current user carbon data not found');
					}

				} catch (error) {
					console.error('Error while loading carbon data:', error);
				}
			},
			getServerData() {
				// 获取当前日期
				let currentDate = new Date();

				// 用于存储最近七天的日期和数据
				let recentData = [];

				// 获取最近七天的日期和数据
				for (let i = 0; i < 7; i++) {
					let date = new Date(currentDate);
					date.setDate(currentDate.getDate() - i);

					// 格式化日期为 "年-月-日" 的形式
					let formattedDate =
						`${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`;

					// 获取对应日期的数据，如果没有数据则填充 0
					let dataValue = this.getDataForDate(formattedDate); // 假设这个函数可以获取日期对应的数据

					recentData.unshift({
						date: formattedDate,
						data: parseInt(dataValue) || 0 // 如果没有数据，则填充 0
					}); // 将日期和数据添加到数组开头
				}

				let res = {
					categories: recentData.map(item => item.date), // 使用最近七天的日期作为 categories
					series: [{
						name: "近7日排碳量",
						data: recentData.map(item => item.data) // 使用最近七天的数据
					}]
				};
				this.chartData = JSON.parse(JSON.stringify(res));
			},

			getDataForDate(date) {
				// 这个函数用于根据日期获取相应的数据，你可以根据实际情况进行实现
				// 假设这里是获取数据的逻辑
				let d = this.daily_data.map(item => {
					// console.log(item.date, date);
					if (item.date == date) {
						return item.emission_reduction
					} else {
						return 0
					}
				})

				return d
				// return Math.floor(Math.random() * 100); // 这里随机生成一个 0 到 100 的数作为示例数据
			}


		}
	}
</script>

<style scoped>
	/* 全局布局 */
	.home-page {
		display: flex;
		flex-direction: column;
		background-color: #f9f9f9;
	}

	/* Banner区域样式 */
	.banner {
		margin-top: 50px;
		height: 200px;
		overflow: hidden;
	}

	/* 保证图片比例正确 */


	/* 使用概况区域样式 */
	.usage-summary {
		display: flex;
		justify-content: space-around;
		/* padding: 20px 0; */
	}

	.summary-item {
		background-color: #f9f9f9;
		/* 浅灰色背景 */
		border-radius: 10px;
		/* 圆角 */
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
		/* 阴影效果 */
		padding: 10px 20px;
		margin: 0 5px;
		/* 保证元素间有间距 */
	}

	.label,
	.value {
		display: block;
	}

	.label {
		color: #666;
		/* 深灰色文字 */
		font-size: 14px;
		/* 字体大小 */
		margin-bottom: 5px;
		/* 与值之间的间距 */
	}

	.value {
		color: #333;
		/* 更深的文字颜色 */
		font-size: 16px;
		/* 较大的字体大小 */
		font-weight: bold;
		/* 加粗 */
	}

	/* 排名信息区域样式 */
	.rank-info {
		text-align: center;
		/* padding: 20px 0; */
		margin-top: 25px;
	}

	.rank-text {
		background-color: #4CAF50;
		/* 绿色背景 */
		color: white;
		/* 白色文字 */
		padding: 10px 20px;
		border-radius: 20px;
		/* 圆角 */
		font-weight: normal;
		/* 默认字体粗细 */
	}

	/* 图表区域样式 */
	.chart-area {
		padding: 20px;
		background-color: #fff;
		/* 白色背景 */
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
		/* 阴影效果 */
		margin-top: 20px;
		/* 与上方内容的间距 */
	}

	.charts-box {
		width: 100%;
		height: 300px;
	}
</style>